<template>
	<view class="page-bg">
		<view class="pad-left-right-48 pad-top-bottom-40 search-box">
			<view class="up-search radius48 centerY">
				<up-search @blur="hanldeSearch" @custom="hanldeSearch" v-model="waterMeterCode" height="86rpx"
					searchIconColor="#FFF" placeholder="输入水表编号" placeholderColor="#FFF" bgColor="transparent"
					shape="round" color="#FFF" :showAction="false"></up-search>
				<image @click="hanldeQrCode" class="code" src="/static/image/icon.png" mode=""></image>
			</view>
		</view>

		<view class="pad-left-right-24">
			<view class="centerY bg-white radius20">
				<!-- <view class="flex-w centerXY columnY pad-top-bottom-20">
					<image class="image-home" src="/static/image/icon1.png"></image>
					<view class="font-24 color-text">抄表</view>
				</view> -->
				<view @click="hanldeEnntrance" class="flex-w centerXY columnY pad-top-bottom-20">
					<image class="image-home" src="/static/image/icon2.png"></image>
					<view class="font-24 color-text">抄表记录</view>
				</view>
				<view @click="hanldeAccount" class="flex-w centerXY columnY pad-top-bottom-20">
					<image class="image-home" src="/static/image/icon3.png"></image>
					<view class="font-24 color-text">账号管理</view>
				</view>
			</view>

			<view v-if="info !=''" class="bg-white pad-left-right-24 pad-top-bottom-30 radius20 mar-top-20">
				<view class="title">基本信息</view>
				<view class="font-28 color-text mar-top-24">户主：{{info.holder_username}}</view>
				<view class="font-28 color-text mar-top-24">地址：{{info.address}}</view>
				<view class="font-28 color-text mar-top-16">上次抄表读数：{{info.water_number}}</view>
				<view class="mar-top-16">
					<up-input :customStyle="{background:'#F7F8FA',border:'1rpx solid #D9D9D9'}" placeholder="输入此次读数"
						border="surround" v-model="newNumber"></up-input>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { waterDetail } from '@/api/index.js';
	import { onShow, onShareAppMessage } from '@dcloudio/uni-app';
	import { waterMeterBillAdd } from '@/api/currency.js';

	// 抄表记录
	const hanldeEnntrance = () => {
		uni.navigateTo({
			url: '/pages/entrance/entrance'
		})
	}

	// 打开扫码二维码
	const hanldeQrCode = () => {
		uni.scanCode({
			success: function(res) {
				// 正则表达式匹配查询字符串中的参数
				const regex = /[?&]([^=]+)=([^&]+)/g;
				let match;
				let params = {};

				// 循环匹配所有查询参数
				while ((match = regex.exec(res.result)) !== null) {
					params[match[1]] = match[2];
				}

				// 获取特定的参数值
				const waterMeterId = params['water_meter_id'];
				const waterMeterCode = params['water_meter_code'];

				uni.navigateTo({
					url: '/pages/waterMeter/waterMeter?code=' + waterMeterCode
				})

			}
		});
	}

	// 水表编号
	const waterMeterCode = ref('');

	// 搜索回调
	const hanldeSearch = (e) => {
		if (waterMeterCode.value.length > 0) {
			uni.navigateTo({
				url: '/pages/waterMeter/waterMeter?code=' + waterMeterCode.value
			})
		}
	};

	// 查询水表详情
	const info = ref('');
	const getWaterDetail = (e) => {
		waterDetail({ water_meter_code: e }).then(res => {
			if (res.code == 200) {
				info.value = res.data.info;
			}
		})
	}

	// 跳转我的
	const hanldeAccount = () => {
		uni.navigateTo({
			url: '/pages/my_actions/my/my'
		})
	}

	// 页面初始化
	onShow(() => {
		// #ifdef MP-WEIXIN
		wx.hideHomeButton()
		// #endif
	})

	onShareAppMessage(() => {
		return {
			path: '/pages/index/index',
		};
	})
</script>

<style scoped lang="scss">
	.page-bg {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/e00255645bcebf36cd7311f320854e7d.png');
		background-size: 100% 526rpx;
		background-color: #F7F8FA;
		background-repeat: no-repeat;
		background-position: 0rpx -70rpx;
		min-height: 100vh;
		box-sizing: border-box;
		padding-top: env(safe-area-inset-top);
	}

	.search-box {

		.up-search {
			border: 1rpx solid $uni-bg-color;
			background: rgba(255, 255, 255, .25);
		}

		.code {
			width: 43rpx;
			height: 40rpx;
			padding-right: 40rpx;
		}
	}

	.image-home {
		display: block;
		width: 88rpx;
		height: 88rpx;
	}

	.title {
		position: relative;
		padding-left: 30rpx;
	}

	.title::after {
		content: '';
		position: absolute;
		width: 7rpx;
		height: 26rpx;
		background: #0099DE;
		border-radius: 4rpx;
		left: 0rpx;
		top: 50%;
		margin-top: -13rpx;
	}

	.button-bottom {
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		padding: 30rpx 48rpx;
		box-sizing: border-box;
		background-color: white;

		.button-style {
			padding: 20rpx 0;
			text-align: center;
		}
	}
</style>